<style media="screen">
    #subsidiaries-tab ul * {
        transition: all .2s;
    }
    #subsidiaries-tab {}
    #subsidiaries-tab ul {
        border: 0;
        padding-left: 0;
    }
    #subsidiaries-tab ul li {
        position: relative;
        float: none;
        -margin-top: 10px;
    }
    #subsidiaries-tab ul li:first-child {
        margin-top: 0;
    }
    #subsidiaries-tab ul li a {
        overflow: hidden;
        display: inline-block;
        width: 100%;
        height: 50px;
        border: 0;
        margin: 0;
        padding: 0 25px 0 15px;
        font-size: 16px;
        line-height: 50px;
        color: #fff;
		font-weight:bold;
    }
    #subsidiaries-tab ul li a:hover {
        background: #6a665e;
    }
    #subsidiaries-tab ul li.am-active a {
        background: #6a665e;
    }
    #subsidiaries-tab ul li a i {
        position: absolute;
        right: 10px;
        top: 0;
        margin: 0;
        font-size: 30px;
        color: #fff;
    }
    #subsidiaries-tab .am-tabs-bd {
        border: 0;
    }
    #subsidiaries-tab .am-tabs-bd .am-tab-panel {
        padding: 0;
    }
    #subsidiaries-tab .am-tabs-bd .am-tab-panel img {
        width: 100%;
    }

    @media screen and (min-width: 641px) and (max-width: 800px) {
        #subsidiaries-tab .am-tabs-nav li a {
            line-height: 40px;

        }
    }
    @media screen and (max-width: 640px) {
        #subsidiaries-tab .am-tabs-nav li a {
            line-height: 35px;
        }
        #subsidiaries-tab .am-tabs-bd {
            margin-top: 30px;
        }
    }
</style>
<div id="subsidiaries-tab">
    <div class="am-tabs am-g" data-am-tabs="{noSwipe: 1}">
        <ul class="am-tabs-nav am-nav am-nav-tabs am-u-md-6 hide">

            <li class="am-active"><a href="http://www.baidu.com">Maoming Hongfu Chemical Company Limited <i class="am-icon-angle-right"></i></a></li>


			<li><a href="#">Luohe Hongfu Chemical Company Limited <i class="am-icon-angle-right"></i></a></li>
            <li><a href="#">Hongfu Chemical (India)Company Limited <i class="am-icon-angle-right"></i></a></li>
            <li><a href="#">Luohe Zhongjian Concrete Mixing Statition <i class="am-icon-angle-right"></i></a></li>
            <li><a href="#">Foshan Junda Import & Export Co., Ltd <i class="am-icon-angle-right"></i></a></li>
        </ul>
        <ul class="am-u-md-6">
			<?php $sub_list = cat2article(13,$is_all=1,$num=5,$order='no'); ?>
			<?php foreach($sub_list['lists'] as $one_sub){ ?>
            <li class="<?php if(id()==$one_sub['sub_id']) echo 'am-active' ; ?>"><a href="{$Think.const.CON_PATH}/{$one_sub[sub_id]}/cat_id/{$one_sub[cat_id]}">{$one_sub['title']}<i class="am-icon-angle-right"></i></a></li>
            <?php } ?>

        </ul>
        <div class="am-tabs-bd am-u-md-6 am-hide-sm-only">
			<?php foreach($sub_list['lists'] as $sub_key=>$one_sub){ ?>
            <div class="am-tab-panel am-fade <?php if($sub_key==0) echo  ' am-in am-active'; ?>  ">
                <img src="{$one_sub['thumb']}" alt="">
            </div>
            <?php } ?>

        </div>
    </div>
</div>

<script>
    $(function() {
        var tabs = $('#subsidiaries-tab .am-tabs');
        tabs.find('li')
            .on('mouseover', function() {
                $(this).siblings('li').removeClass('am-active');
                $(this).addClass('am-active');
                tabs.tabs('open', $(this).index());
            });
    });
</script>
